.card-filp {
  height: 200px;
  width: 200px;
  position: relative;
  transform-style: preserve-3d;
  transition: 1s;
  margin-left: 30%;
}

.front,
.back {
  height: 100%;
  width: 100%;
  position: absolute;
  left: 0;
  top: 0;
  backface-visibility:hidden;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
}
.front {
  background: lightgreen;
}
.back {
  background: lightblue;
}
.back {
  transform: rotateY(180deg);
}
.card-filp:hover {
  transform: rotateY(180deg);
}
:where(.css-dev-only-do-not-override-26rdvq).ant-modal .ant-modal-content{
  text-align: center;
}